<template>
  <div class="detail-all-warpper">
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#F7F8FA' }"
      border
      class="table-box"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column label="商品图" width="80">
        <template slot-scope="scope">
          <img :src="scope.row.push_goods_pic_url" alt="商品图片" style="max-width: 60px; max-height: 60px; border-radius: 8px;">
        </template>
      </el-table-column>
      <el-table-column label="商品信息" width="350">
        <template slot-scope="scope">
          <p>
            <span>{{ scope.row.push_goods_title }}</span>
          </p>
          <p style="margin-top: 8px;">
            <span><span style="color: #999999;">ID：</span><span style="color: #4E78EF;">{{ scope.row.push_update_goods_id }}</span></span>
            <i class="el-icon-copy-document" style="margin-left: 6px; cursor: pointer;" @click="copy(scope.row.push_update_goods_id)" />
          </p>
        </template>
      </el-table-column>
      <template v-if="tabPageInfo.tabLabel !== '修改成功'">
        <el-table-column prop="goods_content_old" label="调整前内容" width="150" />
        <el-table-column prop="goods_content_new" label="调整后内容" width="150" />
        <el-table-column label="修改状态" width="90">
          <template slot-scope="scope">
            <div v-for="item in pageInfo.statusArr" :key="item.value">
              <p v-if="item.value === scope.row.status" :style="{color: item.color}">{{ item.label }}</p>
            </div>
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column prop="goods_content_old" label="调整前内容" />
        <el-table-column prop="goods_content_new" label="调整后内容" />
        <el-table-column label="修改状态">
          <template slot-scope="scope">
            <div v-for="item in pageInfo.statusArr" :key="item.value">
              <p v-if="item.value === scope.row.status" :style="{color: item.color}">{{ item.label }}</p>
            </div>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        v-if="tabPageInfo.tabLabel !== '修改成功'"
        prop="reason"
        label="状态描述"
      />
    </el-table>

    <div class="list-pagina">
      <div class="list-handle">
        <p>已选 {{ multipleSelection.length }} 个商品</p>
        <el-button style="margin-left: 20px;" @click="resetSubmit(multipleSelection)">重新提交</el-button>
        <el-button style="margin-left: 12px;" @click="handleDelete(multipleSelection)">批量删除</el-button>
      </div>
      <el-pagination
        background
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { copyTool } from '../../../utils/tool'
export default {
  props: {
    tabPageInfo: {
      type: Object,
      default: () => ({})
    },
    tableData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      pageInfo: {
        // 修改状态。0进行中 1成功 2失败 3跳过
        statusArr: [
          {
            label: '进行中',
            value: 0,
            color: '#FFA700'
          },
          {
            label: '成功',
            value: 1,
            color: '#16BE4F'
          },
          {
            label: '失败',
            value: 2,
            color: '#EE0000'
          },
          {
            label: '跳过',
            value: 3,
            color: '#999999'
          }
        ]
      },
      multipleSelection: []
    }
  },
  methods: {
    copy(val) {
      if (val) {
        copyTool(val)
        this.$message({ message: '复制成功', type: 'success' })
      } else {
        this.$message({ message: '无内容可复制', type: 'error' })
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    resetSubmit(row) {
      if (row.length) {
        this.$emit('resetSubmit', row)
      } else {
        this.$message({
          type: 'info',
          message: '请选择要提交的任务'
        })
      }
      // if (row.length) {
      //   const params = {
      //     'update_config': '{"max_length":60,"del_before_num":10,"del_after_num":2,"prefix":"前缀","suffix":"后缀","cut_type":1,"delete_words":"","replace":{"原字":"新字"}}', // 执行批量修改任务时传的参数，对应GoodUpdateParam.cs里面的参数，序列化为string，根据平台区分
      //     'edit_type': 0, // 修改类型（会影响参数update_config，每个类型参数不同）0标题，1上下架，2品牌，3预售，4删除商品，5sku编码，6商品编码，7团购价，8库存，9主图，10详情图，11详情文本，12主图补全，13两件打折，14运费模板，15服务，16短标题，17sku规格名
      //     'filter_config': '商品无描述，已过滤;类目预测错误!', // 重新提交主任务时过滤错误信息，可空
      //     'main_task_id': 123456789, // 重新提交时，提交的主任务ID，（输入失败原因，直接提交）
      //     'detail_ids': [] // 重新提交子任务时，多个子任务ID，（勾选商品选择重新提交）
      //   }
      //   row.push(item => params.DetailIds.push(item.push_update_goods_id))
      //   console.log('提交的接口入参 => ', params)
      // }
    },
    // 修改任务详情删除(支持批量删除)（/api/MoveHoseCopyTask/DeleteDistributionUpdateDetaliTask）
    handleDelete(row) {
      console.log('detail-all => ', row)
      if (row.length) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            'PlatformCode': 3, // 平台编码  *
            'ShopCode': '1391171890', // 店铺 *
            'DetailIds': [] // 修改任务详情任务Id集合,支持批量，获取修改记录详情列表数据中任务详情Id字段组装 *
          }
          row.push(item => params.DetailIds.push(item.push_update_goods_id))
          console.log('删除的接口入参 => ', params)
          // ↓↓↓接口请求完毕的消息↓↓↓
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择要删除的任务'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.detail-all-warpper {
  padding: 0 20px;
  .list-pagina {
    display: flex;
    justify-content: space-between;
    margin-top: 17px;
    .list-handle {
      display: flex;
      align-items: center;
    }
    ::v-deep {
      .el-pagination.is-background {
        .el-pager li {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
          &:not(.disabled).active {
            color: #fff;
            background-color: #1890ff;
            border: none;
          }
        }
      }
      .btn-prev,
      .btn-next {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
      }
    }
  }
}
</style>
